<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="/webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="/webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="/webjars/datatables-buttons/1.6.0/css/buttons.semanticui.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="/webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="/webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="/webjars/datatables-buttons/1.6.0/js/dataTables.buttons.js"></script>
    <script src="/webjars/datatables-buttons/1.6.0/js/buttons.semanticui.js"></script>
    <script src="/js/main.js"></script>
    <title>Книги</title>
</head>
<body>
    <div th:insert="~{menu :: menu}"></div>
    <div th:insert="~{accessDenied :: accessDenied}"></div>
    <div class="ui container">
        <h1 class="ui header">Книги</h1>
        <table id="booksTable" class="ui table">
            <thead>
            <tr>
                <th>id</th>
                <th>Название</th>
                <th>Автор</th>
                <th>Жанр</th>
                <th>Комментарии</th>
                <th>Действия</th>
            </tr>
            </thead>
        </table>
    </div>
    <div id="editModal" class="ui modal">
        <div class="header">Редактирование книги</div>
        <div class="content">
            <div class="ui form">
                <input id="upd-nameId" type="hidden" name="id">
                <div class="field">
                    <label>Название книги</label>
                    <input id="upd-nameInput" class="nameInput" type="text" name="name" placeholder="Введите название жанра">
                </div>
                <div class="ui grid">
                    <div class="two column row">
                        <div class="column">
                            <div class="field">
                                <label>Автор</label>
                                <select id="upd-authorSelect" class="ui fluid search dropdown" name="author_id">
                                    <option value="">Выберите автора</option>
                                    <option th:each="author : ${authors}"
                                            th:value="${author.id}"
                                            th:text="${author.name}">
                                        Имя автора
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label>Жанр</label>
                                <select id="upd-genreSelect" class="ui fluid search dropdown" name="genre_id">
                                    <option value="">Выберите жанр</option>
                                    <option th:each="genre : ${genres}"
                                            th:value="${genre.id}"
                                            th:text="${genre.name}">
                                        Название жанра
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <button id="btnSave" class="ui button">OK</button>
            <div class="ui cancel button">Отмена</div>
        </div>
    </div>
    <div id="addModal" class="ui modal">
        <div class="header">Добавить новую книгу</div>
        <div class="content">
            <div class="ui form">
                <div class="field">
                    <label>Название книги</label>
                    <input id="nameInput" class="nameInput" type="text" name="name" placeholder="Введите название книги">
                </div>
                <div class="ui grid">
                    <div class="two column row">
                        <div class="column">
                            <div class="field">
                                <label>Автор</label>
                                <select id="authorSelect" class="ui fluid search dropdown authorDropdown" name="author_id">
                                    <option value="">Выберите автора</option>
                                    <option th:each="author : ${authors}"
                                            th:value="${author.id}"
                                            th:text="${author.name}">
                                        Имя автора
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label>Жанр</label>
                                <select id="genreSelect" class="ui fluid search dropdown genreDropdown" name="genre_id">
                                    <option value="">Выберите жанр</option>
                                    <option th:each="genre : ${genres}"
                                            th:value="${genre.id}"
                                            th:text="${genre.name}">
                                        Название жанра
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <button id="btnAdd" class="ui button">OK</button>
            <div class="ui cancel button">Отмена</div>
        </div>
    </div>
<script>
    $(document).ready(function () {
        var table = $("#booksTable").DataTable({
            ajax: {
                url: "book/",
                type: "GET",
                dataSrc: ""
            },
            order: [1, 'asc'],
            columns: [
                {"data": "id"},
                {"data": "name"},
                {"data": "authorDto.name"},
                {"data": "genreDto.name"},
                {
                    "data": "",
                    "render": function(data, type, row) {
                        return  '<a class="ui button" href="comments?book_id='+row.id+'">'+
                                    '<i class="comments icon"></i>Комментарии'+
                                '</a>';
                    }
                },
                {
                    "data": "",
                    "render": function (data, type, row) {
                        return  '<button class="ui button" onclick=deleteEntity("book/'+row.id+'",$("#booksTable"));>' +
                                    '<i class="ui close icon"></i>Удалить' +
                                '</button>' +
                                '<button class="ui button" onclick=\'showModal('+row.id+',\"'+row.name+'\",'+row.authorDto.id+','+row.genreDto.id+');\'>' +
                                    '<i class="ui cogs icon"></i>Ред.' +
                                '</button>';
                    }
                }
            ],
            lengthChange: false
        });

        new $.fn.dataTable.Buttons(table, [
            {
                text: '<i class="plus icon"></i>Добавить',
                action: function () {
                    $("#addModal").modal('show');
                }
            }
        ]);

        table.buttons().container()
            .appendTo($('div.eight.column:eq(0)', table.table().container()));

        $("#btnAdd").on("click", function () {
            var nameValue = $("#nameInput").val();
            var authorId = $("#authorSelect").val();
            var genreId = $("#genreSelect").val();

            if (nameValue !== "" && authorId !== "" && genreId !== "") {
                var data = {
                    "name": nameValue,
                    "author_id": authorId,
                    "genre_id": genreId,
                };
                createEntity("book/", data, $("#booksTable"));
                $("#addModal").modal('hide');
                $("#nameInput").val("");
            }
        });
        $("#btnSave").on("click", function () {
            var id = $("#upd-nameId").val();
            var name = $("#upd-nameInput").val();
            var authorId = $("#upd-authorSelect").val();
            var genreId = $("#upd-genreSelect").val();

            if (name !== "" && authorId !== "" && genreId !== "") {
                var data = {
                    "id": id,
                    "name": name,
                    "authorDto": {"id": authorId},
                    "genreDto": {"id": genreId}
                };
                updateEntity("book/"+id, data, $("#booksTable"));
                $("#editModal").modal('hide');
            }
        })
    });

    function showModal(id, name, author_id, genre_id) {
        $("#upd-nameId").val(id);
        $("#upd-nameInput").val(name);
        $("#upd-authorSelect").dropdown('set selected', author_id);
        $("#upd-genreSelect").dropdown('set selected', genre_id);

        $("#editModal").modal('show');
    }
</script>
</body>
</html>
